<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
		<link rel="stylesheet" href="../css/style-reset.css">
		<title>习练测试</title>

		<style type="text/css">
			.content{
				overflow: auto;
			}
			.content ul{
				border-top: 1px solid #dcdcdc;
				border-bottom: 1px solid #dcdcdc;
				background-color: #fff;
			}
			.content ul li{
				padding: 10px 15px;
				border-bottom: 1px solid #dcdcdc;
				overflow: hidden;
				font-size: 14px;
			}
			.content li .left{
				float: left;
			}
			.content li .right{
				float: right;
				font-size: 0;				
			}
			.content li .right .word{
				color: #b4b4b4;
				font-size: 14px;
				margin-right: 5px;
			}
			.content li .right .arrow{
				display: inline-block;
				width: 11px;
				height: 16px;
				background-image: url(../images/icons/arrow_in.png);
				background-size: 100% 100%;
				background-repeat: no-repeat;
				vertical-align: bottom;
			}
			.content li .selected{
				color: #42455c;
			}
			.content ul li:last-child{
				border-bottom: none;
			}
			/* bd-info */
			.bd-info{
				margin-top: 15px;
			}
			/* p */
			.bd p{
				margin-top: 10px;
				padding: 0 15px;
				margin-bottom: 10px;
				font-size: 13px;
				color: #b4b4b4;
			}
			/* look result */
			.result-btn{
				position: fixed;
				bottom: 15px;
				left: 2.5%;
				right: 2.5%;
				display: block;
				height: 35px;
				width: 95%;
				background-color: #53ceca;
				border: none;
				border-radius: 4px;
				-webkit-border-radius: 4px;
				font-size: 16px;
				color: #fff;
				font-weight: 600;
				text-align: center;
				line-height: 35px;
			}
			/*info-ipt*/
			.info-ipt{
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				background-color: rgba(0, 0, 0, .6);
				z-index: 10;
			}
			/* select option */
			.bd-info li{
				position: relative;
				overflow: hidden;
			}
			.bd-left{
				float: left;
			}
			.arrow-right{
				float: right;
				width: 11px;
				height: 16px;
				margin-top: 1px;
				background-image: url(../images/icons/arrow_in.png);
				background-size: 100% 100%;
				background-repeat: no-repeat;
			}
			.bd-info select{
				/*position: absolute;
				top: 0;
				right: 30px;*/
				float: right;
				display: inline-block;
				/*width: 50px;*/
				margin-right: 5px;
				background-color: transparent;
				-webkit-appearance: none;
				border: none;
				outline: none;
				color: #b4b4b4;
				font-size: 14px;
				text-align: right;
				direction: rtl;
			}
			.bd-info select:focus{
				outline: none;
			}
			.bd-info select option{
				text-align: right;
				direction: rtl;
			}
		</style>
	</head>
	<body>
		<div class="content">
			<div class="bd">
				<!-- bd-info 输入 -->
				<ul class="bd-info">
					<li class="">
						<span class="bd-left">身高(cm)</span>
						<span class="arrow-right"></span>
						<select class="height" name="" id="">
							<option value="请选择">请选择</option>
							<option value="161">161</option>
							<option value="162">162</option>
							<option value="163">163</option>
							<option value="164">164</option>
							<option value="165">165</option>
						</select>
					</li>
					<li class="">
						<span class="bd-left">体重(kg)</span>
						<span class="arrow-right"></span>
						<select class="weight" name="" id="">
							<option value="请选择">请选择</option>
							<option value="40">40</option>
							<option value="41">41</option>
							<option value="42">42</option>
							<option value="43">43</option>
							<option value="44">44</option>
						</select>
					</li>
					<li>
						<span class="bd-left">习练经验</span>
						<span class="arrow-right"></span>
						<select class="experience" name="" id="">
							<option value="请选择">请选择</option>
							<option value="1-6个月">1-6个月 新手</option>
							<option value="6-12个月">6-12个月 初级</option>
							<option value="1-3年">1-3年 中级</option>
							<option value="3-5年">3-5年 高级</option>
							<option value="5年以上">5年以上 进阶</option>
						</select>
					</li>
				</ul>
				<p>身体素质如何呢？离成功还有一步之遥啦！</p>
				<ul class="bd-prac">
					<li>
						<span class="left">脊柱柔韧度（前驱）</span>
						<span class="right">
							<span class="word">待测试</span>
							<span class="arrow"></span>
						</span>
					</li>
					<li>
						<span class="left">跨不柔韧度（盘腿前驱）</span>
						<span class="right">
							<span class="word">请测试</span>
							<span class="arrow"></span>
						</span>
					</li>
					<li>
						<span class="left">加布柔韧度（手臂背后抓）</span>
						<span class="right">
							<span class="word">请测试</span>
							<span class="arrow"></span>
						</span>
					</li>
					<li>
						<span class="left">脊柱侧弯（双肩高）</span>
						<span class="right">
							<span class="word">请测试</span>
							<span class="arrow"></span>
						</span>
					</li>
				</ul>
				<button id="" class="result-btn" href="">查看测试结果</button>
			</div>
			<div class="info-ipt" style="display: none;">
				<select class="height" name="" id="">
					<option value="161cm">161cm</option>
					<option value="162cm">162cm</option>
					<option value="163cm">163cm</option>
					<option value="164cm">164cm</option>
					<option value="165cm">165cm</option>
					<option value="166cm">166cm</option>
				</select>
				<select class="weight" name="" id="" style="display: none;">
					<option value="45kg">45kg</option>
					<option value="46kg">46kg</option>
					<option value="47kg">47kg</option>
					<option value="48kg">48kg</option>
					<option value="49kg">49kg</option>
					<option value="50kg">50kg</option>
				</select>
				<select class="experience" name="" id="" style="display: none;">
					<option value="新手">1-6个月 新手</option>
					<option value="初级">6-12个月 初级</option>
					<option value="中级">1-3年 中级</option>
					<option value="高级">3-5年 高级</option>
					<option value="新手">1-6个月 新手</option>
					<option value="进阶">5年以上</option>
				</select>
			</div>
		</div>
	</body>
</html>